<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 270px;
            height: 360px;
            position: relative;
        }
        .obstacle{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
        }
        .box img{
            width: 270px;
            height: 360px;
        }
        .title{
                font-size: 14px;
                color: #fff;
                margin-top: 124px;
        }
        .price{
            margin-top: 40px;
            color: #fff;
        }
        .style{
            font-size: 12px;
            color: #fff;
            margin-top: 20px;
        }
        .obstacle.i1{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: url(img/婚纱2-1.jpg) no-repeat;
            opacity: 0;
            transition: all .4s linear;
        } 
        .box:hover .obstacle{
            background-color: rgba(0,0,0,0.6);

        }
        .box:hover .obstacle.i1{
            opacity: 1;
        }
    </style>
</head>
<body>
        <div class="box">
            <img src="file:///C:/Users/%E6%9D%8E%E8%A2%81%E6%B3%89/Desktop/%E4%B8%8D%E5%87%A1%E5%AD%A6%E9%99%A2/01-HTML+CSS%E5%9F%BA%E7%A1%80/08-%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98(ps%E8%AE%BE%E8%AE%A1%E7%A8%BF)/08-%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98(ps%E8%AE%BE%E8%AE%A1%E7%A8%BF)/%E5%A9%9A%E7%BA%B1/%E6%9D%8E%E8%A2%81%E6%B3%89%E7%9A%84%E5%A9%9A%E7%BA%B1/img/婚纱1-1.jpg" alt="">
            <div class="obstacle">
                <div class="obstacle i1">
                    <p class="title">Her Style/一字肩拖尾主纱</p>
                    <p class="price">$5389.00</p>
                    <p class="style">白色/M/VK2531</p>
                </div>  
            </div>


        </div>
</body>
</html>